<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>照片位置</title>
	<script src="../scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	   <script src="http://www.google.com/jsapi?key=ABQIAAAAriss5tq-MZc3FYTiB4WoPhQWp4wysEEkhJuBk9s13KIUbHS35xRV2U9GOs2hhkE19xtxhtwxhbnPMA"
        type="text/javascript"></script> 
    <script type="text/javascript">
        var _LAT = window.parent._LAT * 1;
        var _LNG = window.parent._LNG * 1;       
	google.load('search', '1');
    google.load('maps', '2',{"language" : "zh_CN"});
	google.load("search", "1", {"nocss" : true});
	var localSearch;
	var map;
      function initialize() {
        if (GBrowserIsCompatible()) {   
          // Create and Center a Map
            map = new google.maps.Map2(document.getElementById("big_map_canvas"));
          
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
		  map.enableScrollWheelZoom();
		  map.addControl(new GOverviewMapControl());      
		  
	 localSearch = new MVCFotoMapSearch(map,{container:"divSearchResult"});  

	 clickListener = GEvent.addListener(map, "click", function(marker, point) {
	     if (marker) {
	         map.removeOverlay(marker);
	     } else {
	         map.clearOverlays();
	         map.addOverlay(new GMarker(point));	         
	         _LAT = point.lat();
	         _LNG = point.lng();
	     }
	 }
    );
	 if (_LAT > 0 && _LNG > 0) {
	      map.setCenter(new GLatLng(_LAT, _LNG), 10);	     
	     map.addOverlay(new GMarker(new GLatLng(_LAT, _LNG)));
	  //   window.setTimeout(function(){map.panTo(new GLatLng(_LAT, _LNG))},1000);
	 }
	 else { 
	    map.setCenter(new GLatLng(39.876,116.3232),2);
	 }
        }
      }

MVCFotoMapSearch = window.MVCFotoMapSearch = function(map_, opts_) {
          this.opts = {
              container: opts_.container || "divSearchResult",
              location: opts_.location || map_,
              autoClear: opts_.autoClear || true,
              icon: opts_.icon || new GIcon(G_DEFAULT_ICON)
          };
          this.map = map_;
          this.gLocalSearch = new google.search.LocalSearch();
          this.gLocalSearch.setCenterPoint(this.opts.location);
          this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
          this.gLocalSearch.setSearchCompleteCallback(this, function() {
              if (this.gLocalSearch.results) {
                  var savedResults = document.getElementById(this.opts.container);
                  if (this.opts.autoClear) {
                      savedResults.innerHTML = "";
                  }                  
                  if (this.gLocalSearch.results.length > 0) {
                      //set default marker
                      this.map.clearOverlays();
                      var first_result = this.gLocalSearch.results[0];
                      this.createMarker(new GLatLng(first_result.lat, first_result.lng), first_result.html);
                      _LAT = first_result.lat;
                      _LNG = first_result.lng;
                      savedResults.innerHTML = "您是不是要找：";
                  }
                  for (var i = 0; i < this.gLocalSearch.results.length; i++) {
                      savedResults.appendChild(this.getResult(i, this.gLocalSearch.results[i]));
                  }
              }
          });

          MVCFotoMapSearch.prototype.getResult = function(index,result) {
              var container = document.createElement("div");
              container.className = "list";
              var myRadom = (new Date()).getTime().toString() + Math.floor(Math.random() * 10000);
              container.id = myRadom;

              //var li = document.createElement("li");
              container.innerHTML = "<span class='n'>"+(index+1) + ":</span>" +result.title; //+"<br />地址：" + result.streetAddress;

              container.onclick = function() {
                  map_.clearOverlays();
                  var marker = new GMarker(new GLatLng(result.lat, result.lng), { title: result.title });                  
                  map_.addOverlay(marker);
                  map_.setCenter(new GLatLng(result.lat, result.lng), 10);
                  marker.openInfoWindowHtml(result.html);
                  _LAT = result.lat;
                  _LNG = result.lng;            
              };

              return container;
          }

          MVCFotoMapSearch.prototype.createMarker = function(latLng, content) {
              var marker = new GMarker(latLng, { icon: this.opts.icon, title: this.opts.title });
              GEvent.addListener(marker, "click", function() {
                  marker.openInfoWindowHtml(content);
              });
              this.map.addOverlay(marker);
              this.map.setCenter(latLng, 10);
              marker.openInfoWindowHtml(content);
          }

          MVCFotoMapSearch.prototype.execute = function(keyWord) {
              if (keyWord) {
                  this.gLocalSearch.execute(keyWord);
              }

          }
      };



      $(document).ready(function() {
          $('#btnSearch').click(function() {
              localSearch.execute($('#keyword').val());
          });         
          setTimeout(initialize, 500);
      });
save = function() {
    var opener = window.parent;
    if (opener) {
        opener.savePos(_LAT, _LNG);
    }
    else
        alert('error');
};

    </script>
    <style type="text/css">
        body{width:720px;}
    h1{color:#F5951A;
font-size:1.3em;
margin:0;}
div.list{color:#3964C2; cursor:pointer; margin-bottom:1em; font-size:9pt;}
td.tdSearchResult{color:#c00;font-size:14px}
span.n{font-weight:bold;}
.button{padding:5px 1em;}
.bold{font-weight:bold}
    </style>
  </head>
  <body onunload="GUnload()">
  <h1>在地图上标记照片</h1>
  <table width="720">
    <tbody>
    <tr>
        <td colspan="2">
        <div id="search_local">查找位置：<input type="text" style="width:400px;" id="keyword" /> <input type="button" value="搜索"  id="btnSearch"/></div>
        </td>
    </tr>
        <tr>
            <td style="width:20%;" valign="top" class="tdSearchResult"><div id="divSearchResult" style="width:100%"></div></td>
            <td><div id="big_map_canvas" style="width: 560px; height: 400px"></div> </td>
        </tr>
         <tr>
        <td colspan="2" align="right">
        <input type="button" value="保存" class="button bold" onclick="save()"/>  <input type="button" class="button" value="取消" onclick="window.parent.tb_remove();"/>
        </td>
    </tr>
    </tbody>
  </table>
  </body>
</html>

